<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/iview.css" />
        <link rel="stylesheet" href="css/index.css" />
        <script src="./js/httpVueLoader.js"></script>
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script src="js/iview.min.js"></script>
        <script src="js/echarts.min.js"></script>
        <script src="js/echarts-gl.min.js"></script>
        <script src="js/moment.js"></script>
        <title>华电数智管控平台</title>
        <style></style>
    </head>
    <body>
        <div id="screenHd">
            <div class="hd-cont">
                <div>
                    <div class="box-tit">
                        <img src="./css/img/box-tit-icon.png" alt="" />
                        <div>
                            公司各单位当月完成指标统计
                            <span style="font-weight: 400; font-size: 12px; color: #666666">单位：万元</span>
                        </div>
                        <div class="box-tit-search">
                            <i-select v-model="model1" size="small" style="width: 100px; margin-right: 5px" @on-change="changeSelect1">
                                <i-option v-for="item in list1" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                            <date-picker v-model="monthValue" size="small" type="month" placeholder="选择月份" style="width: 100px" @on-change="changeDate1"></date-picker>
                        </div>
                    </div>
                    <echarts-line
                        :chart-data="{
                    xAxis: ['技术开发', '工程开发', '市场营销', '智能装备', '数据控制', '绿色低碳', '设备共享'],
                    barData1: [ 150, 230, 224, 218, 135, 147, 260],
                    barData2: [ 1510, 1230, 2241, 2118, 1135, 1147, 2160],
                    lineData: [ 50, 20, 24, 28, 35, 17, 26],
                }"></echarts-line>
                </div>
                <div>
                    <div class="box-tit">
                        <img src="./css/img/box-tit-icon.png" alt="" />
                        <div>
                            公司年度完成指标统计
                            <span style="font-weight: 400; font-size: 12px; color: #666666">单位：万元</span>
                        </div>
                        <div class="box-tit-search">
                            <i-select v-model="modelSb" size="small" style="width: 100px; margin-right: 5px" @on-change="changeSelectSb2">
                                <i-option v-for="item in list2" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                            <i-select v-model="model2" size="small" style="width: 100px; margin-right: 5px" @on-change="changeSelect2">
                                <i-option v-for="item in list1" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                            <date-picker v-model="yearValue2" size="small" type="year" placeholder="选择月份" style="width: 100px" @on-change="changeDate2"></date-picker>
                        </div>
                    </div>
                    <echarts-line2
                        :chart-data="{
                xAxis: ['技术开发', '工程开发', '市场营销', '智能装备', '数据控制', '绿色低碳', '设备共享'],
                barData1: [ 150, 230, 224, 218, 135, 147, 260],
                barData2: [ 1510, 1230, 2241, 2118, 1135, 1147, 2160],
                lineData: [ 50, 20, 24, 28, 35, 17, 26],
            }"></echarts-line2>
                </div>
            </div>
            <div class="hd-cont">
                <div>
                    <div class="box-tit">
                        <img src="./css/img/box-tit-icon.png" alt="" />
                        <div>
                            公司各单位年度完成指标统计
                            <span style="font-weight: 400; font-size: 12px; color: #666666">单位：万元</span>
                        </div>
                        <div class="box-tit-search">
                            <i-select v-model="model3" size="small" style="width: 100px; margin-right: 5px" @on-change="changeSelect3">
                                <i-option v-for="item in list1" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                            <date-picker v-model="yearValue" size="small" type="year" placeholder="选择月份" style="width: 100px" @on-change="changeDate3"></date-picker>
                        </div>
                    </div>
                    <echarts-line
                        :chart-data="{
                        xAxis: ['技术开发', '工程开发', '市场营销', '智能装备', '数据控制', '绿色低碳', '设备共享'],
                        barData1: [ 150, 230, 224, 218, 135, 147, 260],
                        barData2: [ 1510, 1230, 2241, 2118, 1135, 1147, 2160],
                        lineData: [ 50, 20, 24, 28, 35, 17, 26],
                    }"></echarts-line>
                </div>
                <div>
                    <div class="box-tit">
                        <img src="./css/img/box-tit-icon.png" alt="" />
                        <div>下月公司经营指标计划</div>
                    </div>
                    <div class="box-cont box-cont-2">
                        <i-table height="315" size="small" stripe :columns="columns1" :data="data1"></i-table>
                    </div>
                </div>
            </div>
            <div class="hd-cont hd-cont-3">
                <div>
                    <div class="box-tit">
                        <img src="./css/img/box-tit-icon.png" alt="" />
                        <div>
                            公司年度完成指标分析
                            <span style="font-weight: 400; font-size: 12px; color: #666666">单位：万元</span>
                        </div>
                        <div class="box-tit-search">
                            <i-select v-model="modelDwnd" size="small" style="width: 100px; margin-right: 5px" @on-change="changeSelectDwnd">
                                <i-option v-for="item in list1" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>

                            <i-select v-model="modelDwndSel" size="small" style="width: 100px; margin-right: 5px" @on-change="changeSelectDwndSel">
                                <i-option v-for="item in list3" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                        </div>
                    </div>
                    <div class="box-cont" id="chart4">
                        <charts-four></charts-four>
                    </div>
                </div>
                <div>
                    <div class="box-tit">
                        <img src="./css/img/box-tit-icon.png" alt="" />
                        <div>
                            公司月度完成指标分析
                            <span style="font-weight: 400; font-size: 12px; color: #666666">单位：万元</span>
                        </div>
                        <div class="box-tit-search">
                            <i-select v-model="modelDwyd" size="small" style="width: 100px; margin-right: 5px" @on-change="changeSelectDwyd">
                                <i-option v-for="item in list1" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>

                            <i-select v-model="modelDwydSel" size="small" style="width: 100px; margin-right: 5px" @on-change="changeSelectDwydSel">
                                <i-option v-for="item in list3" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                        </div>
                    </div>
                    <div class="box-cont" id="chart5">
                        <charts-five></charts-five>
                    </div>
                </div>
                <div>
                    <div class="box-tit">
                        <img src="./css/img/box-tit-icon.png" alt="" />
                        <div>当月滞后工作统计</div>
                    </div>
                    <div class="box-cont" id="chart6">
                        <div class="zhgztj-zj">总计</div>
                        <div class="zhgztj">
                            <div class="zhgztj-item" v-for="(item,index) in zhtjList" :key="index">
                                <div class="zhgztj-item-name" :title="item.name">{{item.name}}</div>
                                <div class="zhgztj-item-bar">
                                    <div class="zhgztj-item-bar-w" :style="'width:'+item.radio">
                                        <div class="zhgztj-item-wc" :title="'完成：'+item.wcNum" :style="'width:'+item.wcradio">完成：{{item.wcNum}}</div>
                                        <div class="zhgztj-item-wwc" :title="'未完成：'+item.wwcNum" :style="'width:'+item.wwcradio">未完成：{{item.wwcNum}}</div>
                                    </div>
                                </div>
                                <div class="zhgztj-item-num" :title="item.total">{{item.total}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hd-cont hd-cont-1">
                <div>
                    <div class="box-tit">
                        <img src="./css/img/box-tit-icon.png" alt="" />
                        <div>当月亮点工作统计</div>
                    </div>
                    <div class="box-cont box-cont-3">
                        <i-table border height="315" size="small" stripe :columns="columns2" :data="data2">
                            <template slot-scope="{ row }" slot="sfwc">
                                <div v-if="row.sfwc=='是'" style="color: #0cb769">{{row.sfwc}}</div>
                                <div v-if="row.sfwc=='否'" style="color: #f01111">{{row.sfwc}}</div>
                            </template>
                        </i-table>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="js/index.js"></script>
    <style></style>
</html>
